<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        #app {
            height: 100%;
            box-sizing: border-box;
            padding: 5px 10px;
            display: flex;
            flex-direction: column;
        }

        header {
            font-weight: 700;
            height: 2.1667rem;
            line-height: 2.1667rem;
            /* background-color: skyblue; */
            display: flex;
            justify-content: space-between;
            font-size: 18px;
        }

        header h2 {
            font-size: 18px;
        }

        header img {
            vertical-align: top;
        }

        main {
            flex: 1;
            overflow: auto;
        }

        .list {
            width: 100%;
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
        }

        .list .left img {
            width: 80px;
            height: 70px;
        }

        .list .middle {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
        }

        .list .right {
            box-sizing: border-box;
            padding-top: 20px;
        }

        .list .right .inc,
        .list .right .dec {
            border-radius: 50%;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background-color: skyblue;
        }

        .list .right input {
            border: none;
            text-align: center;
            width: 20px;
        }

        footer {
            height: 4.1667rem;
            background-color: #474747;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        footer img {
            width: 3.5rem;
            height: 3.1667rem;
            margin-top: -10px;
        }
        footer .jisuan{
            background-color: rgb(16, 199, 16);
            border-radius: 10px;
            color: #fff;
            width: 100px;
            height: 3rem;
            line-height: 3rem;
            font-size: 20px;
            text-align: center;
        }
        footer .price{
            color: #fff;
            font-size: 18px;
        }
       /*  footer .price span{
            color: rgb(184, 184, 184);
            font-size: 14px;
            text-decoration: line-through;
        } */
        footer .Desc{
            color: rgb(184, 184, 184);
            font-size: 14px;
        }
        .Clear{
            border: none;
            background-color: #fff;
            font-weight: 700;
        }
        .Clear img{
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div id="app">
        <header>
            <h2>已选商品</h2>
            <button class="Clear" @click="remove"> <img src="./images/2.png" alt=""> 清空</button>
        </header>
        <main>
            <div class="list" v-for="(item,index) in goodsList" :key="index">
                <div class="left"><img :src="item.pic" alt=""></div>
                <div class="middle">
                    <h3 style="font-size: 18px;">{{item.title}}</h3>
                    <p>
                        <span style="color: red;">{{item.price}}</span>
                        <span style=" font-size: 14px;color:gray">{{item.originprice}}</span>
                    </p>
                </div>
                <div class="right">
                    <button class="inc" @click="getDec(item)">-</button>
                    <input type="text" size="1" v-model="item.value">
                    <button class="dec" @click="getInc(item)">+</button>
                </div>
            </div>
        </main>
        <footer>
            <div>
                <img src="./images/3.png" alt="">
            </div>
            <div>
                <p class="price">总价:￥{{getPrice}}</p>
                <p class="Desc">总数量：{{getSum}}</p>
            </div>
            <div class="jisuan">
                去结算
            </div>
        </footer>
    </div>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            goodsList: [
                {
                    id: 1, pic: 'https://imgm.gmw.cn/attachement/jpg/site2/20211217/f44d307589ec2326325b27.jpg',
                    title: '秋刀鱼/斤',
                    price: '35.00',
                    originprice: '￥35',
                    value:1
                },
                {
                    id: 2, pic: 'https://p0.ssl.qhimgs1.com/sdr/400__/t0199a28ba070b6f486.jpg',
                    title: '鲜大带鱼/条',
                    price: '45.00',
                    originprice: '￥45',
                    value:1
                },
                {
                    id: 3, pic: 'https://p3.ssl.qhimgs1.com/sdr/400__/t015981a4fc526783a9.jpg',
                    title: '鲜活全母皮皮虾/只',
                    price: '85.00',
                    originprice: '￥85',
                    value:1
                },
                {
                    id: 4, pic: 'https://p1.ssl.qhimgs1.com/sdr/400__/t01c2efc4d13b255e1b.jpg',
                    title: '13-15头鲍鱼/只',
                    price: '85.00',
                    originprice: '￥85',
                    value:1
                },
                {
                    id: 5, pic: 'https://p0.ssl.qhimgs1.com/sdr/400__/t0199a28ba070b6f486.jpg',
                    title: '鲜大带鱼/条',
                    price: '45.00',
                    originprice: '￥45',
                    value:1
                },
                {
                    id: 6, pic: 'https://p3.ssl.qhimgs1.com/sdr/400__/t015981a4fc526783a9.jpg',
                    title: '鲜活全母皮皮虾/只',
                    price: '85.00',
                    originprice: '￥85',
                    value:1
                },
                {
                    id: 7, pic: 'https://p1.ssl.qhimgs1.com/sdr/400__/t01c2efc4d13b255e1b.jpg',
                    title: '13-15头鲍鱼/只',
                    price: '85.00',
                    originprice: '￥85',
                    value:1
                },
                {
                    id: 1, pic: 'https://imgm.gmw.cn/attachement/jpg/site2/20211217/f44d307589ec2326325b27.jpg',
                    title: '秋刀鱼/斤',
                    price: '35.00',
                    originprice: '￥35',
                    value:1
                }
            ]
        },
        methods: {
            getInc(item){
                item.value>=5 ? 5 : item.value+=1;
            },
            getDec(item){
                item.value<=1  ?1 : item.value-=1;
            },
            remove(item){
                this.goodsList=[]
            }
        },
        computed: {
            getPrice(){
                return this.goodsList.reduce((sum,item)=>{
                    return sum += item.value*item.price
                },0)
            },
            getSum(){
                return this.goodsList.reduce((sum,item)=>{
                    return sum += item.value
                },0)
            }
        },
    })
</script>